<template>
  <div>
    <button @click="romdonChange">随机更改中心坐标</button>
    <div id="container"
         style="width:800px;height:600px"></div>
  </div>
</template>
<script>
var GPS = {
  PI: 3.14159265358979324,
  x_pi: 3.14159265358979324 * 3000.0 / 180.0,
  delta: function (lat, lon) {
    var a = 6378245.0; //  a: 卫星椭球坐标投影到平面地图坐标系的投影因子。
    var ee = 0.00669342162296594323; //  ee: 椭球的偏心率。
    var dLat = this.transformLat(lon - 105.0, lat - 35.0);
    var dLon = this.transformLon(lon - 105.0, lat - 35.0);
    var radLat = lat / 180.0 * this.PI;
    var magic = Math.sin(radLat);
    magic = 1 - ee * magic * magic;
    var sqrtMagic = Math.sqrt(magic);
    dLat = (dLat * 180.0) / ((a * (1 - ee)) / (magic * sqrtMagic) * this.PI);
    dLon = (dLon * 180.0) / (a / sqrtMagic * Math.cos(radLat) * this.PI);
    return {
      'lat': dLat,
      'lon': dLon
    };
  },
  //WGS-84 to GCJ-02
  gcj_encrypt: function (wgsLat, wgsLon) {
    if (this.outOfChina(wgsLat, wgsLon))
      return {
        'lat': wgsLat,
        'lon': wgsLon
      };
    var d = this.delta(wgsLat, wgsLon);
    return {
      'lat': wgsLat + d.lat,
      'lon': wgsLon + d.lon
    };
  },
  outOfChina: function (lat, lon) {
    if (lon < 72.004 || lon > 137.8347)
      return true;
    if (lat < 0.8293 || lat > 55.8271)
      return true;
    return false;
  },
  transformLat: function (x, y) {
    var ret = -100.0 + 2.0 * x + 3.0 * y + 0.2 * y * y + 0.1 * x * y + 0.2 * Math.sqrt(Math.abs(x));
    ret += (20.0 * Math.sin(6.0 * x * this.PI) + 20.0 * Math.sin(2.0 * x * this.PI)) * 2.0 / 3.0;
    ret += (20.0 * Math.sin(y * this.PI) + 40.0 * Math.sin(y / 3.0 * this.PI)) * 2.0 / 3.0;
    ret += (160.0 * Math.sin(y / 12.0 * this.PI) + 320 * Math.sin(y * this.PI / 30.0)) * 2.0 / 3.0;
    return ret;
  },
  transformLon: function (x, y) {
    var ret = 300.0 + x + 2.0 * y + 0.1 * x * x + 0.1 * x * y + 0.1 * Math.sqrt(Math.abs(x));
    ret += (20.0 * Math.sin(6.0 * x * this.PI) + 20.0 * Math.sin(2.0 * x * this.PI)) * 2.0 / 3.0;
    ret += (20.0 * Math.sin(x * this.PI) + 40.0 * Math.sin(x / 3.0 * this.PI)) * 2.0 / 3.0;
    ret += (150.0 * Math.sin(x / 12.0 * this.PI) + 300.0 * Math.sin(x / 30.0 * this.PI)) * 2.0 / 3.0;
    return ret;
  }
};
import AMapLoader from '@amap/amap-jsapi-loader';
export default {
  data () {
    return {
      map: null,
      marker: null
    }
  },
  created () {
    let that = this
    AMapLoader.load({
      "key": "f54ce615d6d7a428c49ee23d69f4f9b7",   // 申请好的Web端开发者Key，首次调用 load 时必填
      "version": "2.0",   // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
      "plugins": ['AMap.ToolBar', 'AMap.Driving', 'AMap.Geolocation']  //插件列表
    }).then((AMap) => {
      // 获取当前定位
      this.map = new AMap.Map('container');
      let location = new AMap.Geolocation()
      location.getCurrentPosition((status, result) => {
        console.log(status)
        console.log(result)
        let pixel = this.map.lngLatToContainer(result.position)
        if (status === 'complete') {
          this.map.setCenter(result.position)
          this.createMarker(result.position)
          this.map.on('click', function (e) {
            console.log(e)
            that.createMarker([e.lnglat.getLng(), e.lnglat.getLat()])
          })
        } else {
          this.$message.error("获取定位失败");
        }
      })
    }).catch(e => {
      console.log(e);
    })
  },
  methods: {
    romdonChange () {
      // 经度 0-180°
      let lng = Math.random() * 180;
      // 纬度 0-90°
      let lat = Math.random() * 90;
      let lngLat = new AMap.LngLat(lng, lat);
      this.map.setCenter(lngLat)
      this.createMarker([lng, lat])
    },
    createMarker (position) {
      console.log(position, 'position')
      if (this.marker == null) {
        this.marker = new AMap.Marker({
          map: this.map,
          position: position
        })
      } else {
        this.marker.setPosition(position)
      }

    }
  }
}
</script>